<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <style type="text/css">
            .ui-steps .ui-steps-item {
                width: 25%;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <h:form>
            <p:growl id="messages" autoUpdate="true"/>

            <div class="ui-g ui-fluid">
                <div class="ui-g-12">
                    <div class="card">
                        <h1>Breadcrumb</h1>
                        <p:breadCrumb>
                            <p:menuitem value="Categories" url="#" />
                            <p:menuitem value="Sports" url="#" />
                            <p:menuitem value="Basketball" url="#" />
                            <p:menuitem value="NBA" url="#" />
                            <p:menuitem value="Teams" url="#" />
                            <p:menuitem value="L.A. Lakers" url="#" />
                            <p:menuitem value="Roster" url="#" />
                            <p:menuitem value="Kobe Bryant" url="#" />
                        </p:breadCrumb>
                    </div>

                    <div class="card">
                        <h1>Steps</h1>
                        <p:steps activeIndex="1">
                            <p:menuitem value="Personal" url="#"/>
                            <p:menuitem value="Seat" url="#"/>
                            <p:menuitem value="Payment" url="#"/>
                            <p:menuitem value="Confirm" url="#"/>
                        </p:steps>
                    </div>

                    <div class="card">
                        <h1>MenuBar</h1>
                        <p:menubar>
                            <p:submenu label="File" icon="ui-icon-insert-drive-file">
                                <p:submenu label="New" icon="ui-icon-add-box">
                                    <p:menuitem value="Project" url="#" />
                                    <p:menuitem value="Other" url="#" />
                                </p:submenu>
                                <p:menuitem value="Open" url="#" icon="ui-icon-open-in-browser"/>
                                <p:separator />
                                <p:menuitem value="Quit" url="#" icon="ui-icon-close"/>
                            </p:submenu>

                            <p:submenu label="Edit" icon="ui-icon-mode-edit">
                                <p:menuitem value="Undo" url="#" icon="ui-icon-undo" />
                                <p:menuitem value="Redo" url="#" icon="ui-icon-redo" />
                            </p:submenu>

                            <p:submenu label="Help" icon="ui-icon-help">
                                <p:menuitem value="Contents" url="#" icon="ui-icon-inbox"/>
                                <p:submenu label="Search" icon="ui-icon-search">
                                    <p:submenu label="Text" icon="ui-icon-text-fields">
                                        <p:menuitem value="Workspace" url="#" icon="ui-icon-work"/>
                                    </p:submenu>
                                    <p:menuitem value="File" url="#" icon="ui-icon-attach-file"/>
                                </p:submenu>
                            </p:submenu>

                            <p:submenu label="Actions" icon="ui-icon-settings-applications">
                                <p:submenu label="Ajax" icon="ui-icon-refresh">
                                    <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-save" update="messages"/>
                                    <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-update" update="messages"/>
                                </p:submenu>
                                <p:submenu label="Non-Ajax" icon="ui-icon-compare-arrows">
                                    <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
                                </p:submenu>
                            </p:submenu>

                            <p:menuitem value="Quit" url="http://www.primefaces.org/" icon="ui-icon-close" />

                            <f:facet name="options">
                                <p:inputText placeholder="Search" style="margin-right:10px;vertical-align:middle;padding:2px"/>
                            </f:facet>
                        </p:menubar>
                    </div>
                </div>

                <div class="ui-g-12 ui-lg-6">
                    <!-- Left Colum -->
                    <div class="card">
                        <h1>Plain Menu</h1>
                        <p:menu style="margin-bottom:20px">
                            <p:submenu label="Ajax">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages"/>
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="External" url="http://www.primefaces.org/"/>
                                <p:menuitem value="Internal" url="#"/>
                            </p:submenu>
                        </p:menu>

                        <p:commandButton id="dynaButton" value="Overlay" type="button" icon="ui-icon-open-in-new" style="width:auto"/>

                        <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
                            <p:submenu label="Ajax">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-save"/>
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-refresh"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon ui-icon-close"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="External" url="http://www.primefaces.org/" icon="ui-icon-open-in-browser"/>
                                <p:menuitem value="Internal" url="#" icon="ui-icon-home"/>
                            </p:submenu>
                        </p:menu>
                    </div>

                    <div class="card">
                        <h1>Toggleable</h1>
                        <p:menu toggleable="true">
                            <p:submenu label="Ajax">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-save" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-refresh"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="External" url="http://www.primefaces.org/" icon="ui-icon-open-in-browser"/>
                                <p:menuitem value="Internal" url="#" icon="ui-icon-home"/>
                            </p:submenu>
                        </p:menu>
                    </div>

                    <div class="card">
                        <h1>TieredMenu</h1>
                        <p:tieredMenu style="width:250px;margin-bottom:20px">
                            <p:submenu label="File" icon="ui-icon-insert-drive-file">
                                <p:submenu label="New" icon="ui-icon-add-box">
                                    <p:menuitem value="Project" url="#" />
                                    <p:menuitem value="Other" url="#" />
                                </p:submenu>
                                <p:menuitem value="Open" url="#" icon="ui-icon-open-in-browser"/>
                                <p:separator />
                                <p:menuitem value="Quit" url="#" icon="ui-icon-close"/>
                            </p:submenu>

                            <p:submenu label="Edit" icon="ui-icon-mode-edit">
                                <p:menuitem value="Undo" url="#" icon="ui-icon-undo" />
                                <p:menuitem value="Redo" url="#" icon="ui-icon-redo" />
                            </p:submenu>

                            <p:submenu label="Help" icon="ui-icon-help">
                                <p:menuitem value="Contents" url="#" icon="ui-icon-inbox"/>
                                <p:submenu label="Search" icon="ui-icon-search">
                                    <p:submenu label="Text" icon="ui-icon-text-fields">
                                        <p:menuitem value="Workspace" url="#" icon="ui-icon-work"/>
                                    </p:submenu>
                                    <p:menuitem value="File" url="#" icon="ui-icon-attach-file"/>
                                </p:submenu>
                            </p:submenu>

                            <p:submenu label="Actions" icon="ui-icon-settings-applications">
                                <p:submenu label="Ajax" icon="ui-icon-refresh">
                                    <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-save" update="messages"/>
                                    <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-update" update="messages"/>
                                </p:submenu>
                                <p:submenu label="Non-Ajax" icon="ui-icon-compare-arrows">
                                    <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
                                </p:submenu>
                            </p:submenu>
                        </p:tieredMenu>

                        <p:commandButton id="dynaButtonTiered"
                                         value="Overlay"
                                         icon="ui-icon-open-in-new"
                                         style="width:auto"
                                         type="button"/>

                        <p:tieredMenu overlay="true" trigger="dynaButtonTiered" my="left top" at="left bottom" style="width:250px">
                            <p:submenu label="File" icon="ui-icon-insert-drive-file">
                                <p:submenu label="New" icon="ui-icon-add-box">
                                    <p:menuitem value="Project" url="#" />
                                    <p:menuitem value="Other" url="#" />
                                </p:submenu>
                                <p:menuitem value="Open" url="#" icon="ui-icon-open-in-browser"/>
                                <p:separator />
                                <p:menuitem value="Quit" url="#" icon="ui-icon-close"/>
                            </p:submenu>

                            <p:submenu label="Edit" icon="ui-icon-mode-edit">
                                <p:menuitem value="Undo" url="#" icon="ui-icon-undo" />
                                <p:menuitem value="Redo" url="#" icon="ui-icon-redo" />
                            </p:submenu>

                            <p:submenu label="Help" icon="ui-icon-help">
                                <p:menuitem value="Contents" url="#" icon="ui-icon-inbox"/>
                                <p:submenu label="Search" icon="ui-icon-search">
                                    <p:submenu label="Text" icon="ui-icon-text-fields">
                                        <p:menuitem value="Workspace" url="#" icon="ui-icon-work"/>
                                    </p:submenu>
                                    <p:menuitem value="File" url="#" icon="ui-icon-attach-file"/>
                                </p:submenu>
                            </p:submenu>

                            <p:submenu label="Actions" icon="ui-icon-settings-applications">
                                <p:submenu label="Ajax" icon="ui-icon-refresh">
                                    <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-save" update="messages"/>
                                    <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-update" update="messages"/>
                                </p:submenu>
                                <p:submenu label="Non-Ajax" icon="ui-icon-compare-arrows">
                                    <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
                                </p:submenu>
                            </p:submenu>
                        </p:tieredMenu>
                    </div>
                </div>
                <div class="ui-g-12 ui-lg-6">
                    <!-- Right Colum -->
                    <div class="card">
                        <h1>MenuButton</h1>
                        <p:menuButton value="Options">
                            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-check"/>
                            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-update"/>
                            <p:menuitem value="Delete" actionListener="#{menuView.delete}" ajax="false" icon="ui-icon-delete"/>
                            <p:separator />
                            <p:menuitem value="Homepage" url="http://www.primefaces.org/" icon="ui-icon-home"/>
                        </p:menuButton>

                        <h1 style="margin-top:40px">ContextMenu</h1>
                        Right click!
                        <p:contextMenu>
                            <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-save"/>
                            <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-refresh"/>
                            <p:menuitem value="Delete" actionListener="#{menuView.delete}" ajax="false" icon="ui-icon-close"/>
                            <p:menuitem value="Homepage" url="http://www.primefaces.org/" icon="ui-icon-home"/>
                        </p:contextMenu>
                    </div>

                    <div class="card">
                        <h1>SlideMenu</h1>
                        <p:slideMenu backLabel="Back" style="width:260px">
                            <p:submenu label="Ajax Menuitems" icon="ui-icon-refresh">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" update="messages" icon="ui-icon-save" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}" update="messages" icon="ui-icon-update" />
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem" icon="ui-icon-compare-arrows">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}"  ajax="false" icon="ui-icon-close"/>
                            </p:submenu>
                            <p:separator />
                            <p:submenu label="Navigations" icon="ui-icon-open-in-new">
                                <p:submenu label="Prime Links" icon="ui-icon-link">
                                    <p:menuitem value="Prime" url="http://www.prime.com.tr/" />
                                    <p:menuitem value="PrimeFaces" url="http://www.primefaces.org/" />
                                </p:submenu>
                                <p:menuitem value="Mobile" url="#" icon="ui-icon-phonelink-setup"/>
                            </p:submenu>
                        </p:slideMenu>
                    </div>

                    <div class="card">
                        <h1>PanelMenu</h1>
                        <p:panelMenu>
                            <p:submenu label="Ajax Menuitems">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-save" />
                                <p:menuitem value="Update" actionListener="#{menuView.update}"  icon="ui-icon-refresh" />
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}"  ajax="false" icon="ui-icon-delete"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:submenu label="Links">
                                    <p:submenu label="PrimeFaces">
                                        <p:menuitem value="Home" url="http://www.primefaces.org/" icon="ui-icon-home" />
                                        <p:menuitem value="Docs" url="http://www.primefaces.org/documentation" icon="ui-icon-find-in-page" />
                                        <p:menuitem value="Download" url="http://www.primefaces.org/downloads" icon="ui-icon-file-download" />
                                        <p:menuitem value="Support" url="http://www.primefaces.org/support" icon="ui-icon-help" />
                                    </p:submenu>
                                </p:submenu>
                                <p:menuitem value="Star" url="#" icon="ui-icon-star" />
                            </p:submenu>
                        </p:panelMenu>
                    </div>
                </div>

                <div class="ui-g-12 ui-g-6">
                    <div class="card">
                        <h1>TabMenu</h1>
                        <p:tabMenu activeIndex="#{param.i}">
                            <p:menuitem value="Overview" outcome="/menu.xhtml" icon="ui-icon-star">
                                <f:param name="i" value="0" />
                            </p:menuitem>
                            <p:menuitem value="Demos" outcome="/menu.xhtml" icon="ui-icon-search">
                                <f:param name="i" value="1" />
                            </p:menuitem>
                            <p:menuitem value="Documentation" outcome="/menu.xhtml" icon="ui-icon-insert-drive-file">
                                <f:param name="i" value="2" />
                            </p:menuitem>
                            <p:menuitem value="Support" outcome="/menu.xhtml" icon="ui-icon-help-outline">
                                <f:param name="i" value="3" />
                            </p:menuitem>
                            <p:menuitem value="Profile" outcome="/menu.xhtml" icon="ui-icon-person">
                                <f:param name="i" value="4" />
                            </p:menuitem>
                        </p:tabMenu>
                    </div>
                </div>

                <div class="ui-g-12 ui-g-6">
                    <div class="card">
                        <h1>MegaMenu - Horizontal</h1>
                        <p:megaMenu orientation="horizontal">
                            <p:submenu label="TV" icon="ui-icon-tv">
                                <p:column>
                                    <p:submenu label="TV.1">
                                        <p:menuitem value="TV.1.1" url="#" />
                                        <p:menuitem value="TV.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.2">
                                        <p:menuitem value="TV.2.1" url="#" />
                                        <p:menuitem value="TV.2.2" url="#" />
                                        <p:menuitem value="TV.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="TV.4">
                                        <p:menuitem value="TV.4.1" url="#" />
                                        <p:menuitem value="TV.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.5">
                                        <p:menuitem value="TV.5.1" url="#" />
                                        <p:menuitem value="TV.5.2" url="#" />
                                        <p:menuitem value="TV.5.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <!--<p:column>
                                    <strong>Image</strong>
                                    <p:graphicImage name="/demo/images/nature/nature1.jpg" width="200"/>
                                </p:column>-->
                            </p:submenu>

                            <p:submenu label="Sports" icon="ui-icon-timer">
                                <p:column>
                                    <p:submenu label="Sports.1">
                                        <p:menuitem value="Sports.1.1" url="#" />
                                        <p:menuitem value="Sports.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.2">
                                        <p:menuitem value="Sports.2.1" url="#" />
                                        <p:menuitem value="Sports.2.2" url="#" />
                                        <p:menuitem value="Sports.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Sports.4">
                                        <p:menuitem value="Sports.4.1" url="#" />
                                        <p:menuitem value="Sports.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.5">
                                        <p:menuitem value="Sports.5.1" url="#" />
                                        <p:menuitem value="Sports.5.2" url="#" />
                                        <p:menuitem value="Sports.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                                <p:column>
                                    <p:submenu label="Sports.7">
                                        <p:menuitem value="Sports.7.1" url="#" />
                                        <p:menuitem value="Sports.7.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Entertainment" icon="ui-icon-camera">
                                <p:column>
                                    <p:submenu label="Entertainment.1">
                                        <p:menuitem value="Entertainment.1.1" url="#" />
                                        <p:menuitem value="Entertainment.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.2">
                                        <p:menuitem value="Entertainment.2.1" url="#" />
                                        <p:menuitem value="Entertainment.2.2" url="#" />
                                        <p:menuitem value="Entertainment.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Entertainment.4">
                                        <p:menuitem value="Entertainment.4.1" url="#" />
                                        <p:menuitem value="Entertainment.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.5">
                                        <p:menuitem value="Entertainment.5.1" url="#" />
                                        <p:menuitem value="Entertainment.5.2" url="#" />
                                        <p:menuitem value="Entertainment.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Tech" icon="ui-icon-laptop">
                                <p:column>
                                    <p:submenu label="Tech.1">
                                        <p:menuitem value="Tech.1.1" url="#" />
                                        <p:menuitem value="Tech.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Tech.2">
                                        <p:menuitem value="Tech.2.1" url="#" />
                                        <p:menuitem value="Tech.2.2" url="#" />
                                        <p:menuitem value="Tech.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Tech.4">
                                        <p:menuitem value="Tech.4.1" url="#" />
                                        <p:menuitem value="Tech.4.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:menuitem value="Quit" url="http://www.primefaces.org/" icon="ui-icon-exit-to-app" />
                        </p:megaMenu>

                        <h1>MegaMenu - Vertical</h1>
                        <p:megaMenu orientation="vertical" style="width:200px">
                            <p:submenu label="TV" icon="ui-icon-tv">
                                <p:column>
                                    <p:submenu label="TV.1">
                                        <p:menuitem value="TV.1.1" url="#" />
                                        <p:menuitem value="TV.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.2">
                                        <p:menuitem value="TV.2.1" url="#" />
                                        <p:menuitem value="TV.2.2" url="#" />
                                        <p:menuitem value="TV.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="TV.4">
                                        <p:menuitem value="TV.4.1" url="#" />
                                        <p:menuitem value="TV.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="TV.5">
                                        <p:menuitem value="TV.5.1" url="#" />
                                        <p:menuitem value="TV.5.2" url="#" />
                                        <p:menuitem value="TV.5.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <!--<p:column>
                                    <strong>Image</strong>
                                    <p:graphicImage name="/demo/images/nature/nature1.jpg" width="200"/>
                                </p:column>-->
                            </p:submenu>

                            <p:submenu label="Sports" icon="ui-icon-timer">
                                <p:column>
                                    <p:submenu label="Sports.1">
                                        <p:menuitem value="Sports.1.1" url="#" />
                                        <p:menuitem value="Sports.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.2">
                                        <p:menuitem value="Sports.2.1" url="#" />
                                        <p:menuitem value="Sports.2.2" url="#" />
                                        <p:menuitem value="Sports.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Sports.4">
                                        <p:menuitem value="Sports.4.1" url="#" />
                                        <p:menuitem value="Sports.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Sports.5">
                                        <p:menuitem value="Sports.5.1" url="#" />
                                        <p:menuitem value="Sports.5.2" url="#" />
                                        <p:menuitem value="Sports.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                                <p:column>
                                    <p:submenu label="Sports.7">
                                        <p:menuitem value="Sports.7.1" url="#" />
                                        <p:menuitem value="Sports.7.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Entertainment" icon="ui-icon-camera">
                                <p:column>
                                    <p:submenu label="Entertainment.1">
                                        <p:menuitem value="Entertainment.1.1" url="#" />
                                        <p:menuitem value="Entertainment.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.2">
                                        <p:menuitem value="Entertainment.2.1" url="#" />
                                        <p:menuitem value="Entertainment.2.2" url="#" />
                                        <p:menuitem value="Entertainment.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Entertainment.4">
                                        <p:menuitem value="Entertainment.4.1" url="#" />
                                        <p:menuitem value="Entertainment.4.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Entertainment.5">
                                        <p:menuitem value="Entertainment.5.1" url="#" />
                                        <p:menuitem value="Entertainment.5.2" url="#" />
                                        <p:menuitem value="Entertainment.5.3" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:submenu label="Tech" icon="ui-icon-laptop">
                                <p:column>
                                    <p:submenu label="Tech.1">
                                        <p:menuitem value="Tech.1.1" url="#" />
                                        <p:menuitem value="Tech.1.2" url="#" />
                                    </p:submenu>
                                    <p:submenu label="Tech.2">
                                        <p:menuitem value="Tech.2.1" url="#" />
                                        <p:menuitem value="Tech.2.2" url="#" />
                                        <p:menuitem value="Tech.2.3" url="#" />
                                    </p:submenu>
                                </p:column>

                                <p:column>
                                    <p:submenu label="Tech.4">
                                        <p:menuitem value="Tech.4.1" url="#" />
                                        <p:menuitem value="Tech.4.2" url="#" />
                                    </p:submenu>
                                </p:column>
                            </p:submenu>

                            <p:menuitem value="Quit" url="http://www.primefaces.org/" icon="ui-icon-exit-to-app" />
                        </p:megaMenu>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>